<template>
  <div>
    <h3 class="title">本校概览</h3>
    <div class="layui-row layui-col-space10">
      <div class="layui-col-lg3 layui-col-md3 layui-col-sm3">
        <div class="homgbg pointer white" @click="downloadSchoolReport">学校报告下载</div>
        <div class="homgbg homgbg1 pointer white" @click="downloadPersonReport">个人报告下载</div>
        <div class="bgf bod mt10" style="min-height:60.7vh;">
          <h3 class="title1 t_c">全区情况</h3>
          <ul class="qingkuang">
            <li class="clearfix"><span class="fl">全区总学校数</span><b class="fr">{{areaInfo.schoolNum}}</b></li>
            <li class="clearfix"><span class="fl">区优秀率情况</span><b class="fr blue">{{areaInfo.excellentRate}}%</b></li>
            <li class="clearfix"><span class="fl">区及格率情况</span><b class="fr orange">{{areaInfo.passingRate}}%</b></li>
          </ul>
          <h3 class="title1 t_c b_t">全区排名详情</h3>
          <div class="paiming">
            <table width="100%">
              <tr v-for="item in rank" v-bind:key="item.rank">
                <td><b class="f24 blue">{{item.rank}}</b></td>
                <td><img :src="require('../../icons/png/i_03.jpg')"></td>
                <td>
                  <dl>
                    <dt class="f_b">{{item.name}}</dt>
                    <dd class="f12 c_9">优秀率 {{(item.excellentRate*100).toFixed(2)}}% · 及格率 {{(item.passingRate*100).toFixed(2)}}%</dd>
                  </dl>
                </td>
              </tr>
            </table>
          </div>
        </div>
      </div>
      <div class="layui-col-lg9 layui-col-md9 layui-col-sm9">
        <div class="layui-row layui-col-space10">
          <div class="layui-col-lg6 layui-col-md6 layui-col-sm6">
            <div class="bgf bod mt10">
              <h3 class="title1">总体情况</h3>
              <div class="p15">
                <div ref="chart1" style="width: 100%;height:34.5vh;"></div>
              </div>
            </div>
            <div class="bgf bod mt10">
              <h3 class="title1">体质监测结果</h3>
              <div ref="chart2" style="width: 100%;height:37.5vh;"></div>
            </div>
          </div>
          <div class="layui-col-lg6 layui-col-md6 layui-col-sm6">
            <div class="layui-row layui-col-space10">
              <div class="layui-col-lg6 layui-col-md6 layui-col-sm6">
                <div class="bgf bod mt10">
                  <h3 class="title1">男生总体情况</h3>
                  <div class="p15">
                    <div ref="chart3" style="width: 100%;height:34.5vh;"></div>
                  </div>
                </div>
              </div>
              <div class="layui-col-lg6 layui-col-md6 layui-col-sm6">
                <div class="bgf bod mt10">
                  <h3 class="title1">女生总体情况</h3>
                  <div class="p15">
                    <div ref="chart4" style="width: 100%;height:34.5vh;"></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="bgf bod mt10">
              <h3 class="title1">各年级分布情况</h3>
              <div class="p15">
                <div ref="chart5" style="width: 100%;height:34.5vh;"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getAreaInfo, getSchoolRank, getSchoolOverview } from '../../api/school-overview'
import { downloadSchool, checkSchoolReport } from '../../api/download'
export default {
  name: 'index',
  data () {
    return {
      schoolId: '',
      areaInfo: {
        schoolNum: 0,
        excellentRate: 0,
        passingRate: 0
      },
      rank: [],
      option1: {
        color: ['#F25A5A', '#FFC046', '#05B55A', '#1479EE'],
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          x: 'left',
          data: ['优秀率', '良好率', '及格率', '不及格']
        },
        series: [{
          name: '总体情况',
          type: 'pie',
          radius: ['50%', '70%'],
          avoidLabelOverlap: false,
          label: {
            normal: {
              show: false,
              position: 'center',
              textStyle: {
                fontSize: '22'
              }
            },
            emphasis: {
              show: true,
              position: 'center',
              formatter: function (param) {
                return param.name + '\r\n\r\n' + param.percent + '%'
              },
              textStyle: {
                fontSize: '22'
              }
            }
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          data: [{
            value: 0,
            name: '优秀率'
          }, {
            value: 0,
            name: '良好率'
          }, {
            value: 0,
            name: '及格率'
          }, {
            value: 0,
            name: '不及格'
          }]
        }]
      },
      option2: {
        radar: {
          name: {
            textStyle: {
              color: '#fff',
              backgroundColor: '#999',
              borderRadius: 3,
              padding: [3, 5]
            }
          },
          indicator: ['']
        },
        series: [{
          name: '体质监测结果',
          type: 'radar',
          itemStyle: {
            normal: {
              color: '#386db3',
              areaStyle: {
                type: 'default'
              }
            }
          },
          data: [{
            value: [],
            name: '体质监测结果',
            areaStyle: {
              normal: {
                color: '#1479EE'
              }
            },
            lineStyle: {
              normal: {
                color: '#1479EE'
              }
            }
          }]
        }]
      },
      option3: {
        color: ['#F25A5A', '#FFC046', '#05B55A', '#1479EE'],
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          x: 'left',
          data: ['优秀率', '良好率', '及格率', '不及格']
        },
        series: [{
          name: '男生总体情况',
          type: 'pie',
          radius: ['50%', '70%'],
          avoidLabelOverlap: false,
          label: {
            normal: {
              show: false,
              position: 'center',
              textStyle: {
                fontSize: '22'
              }
            },
            emphasis: {
              show: true,
              position: 'center',
              formatter: function (param) {
                return param.name + '\r\n\r\n' + param.percent + '%'
              },
              textStyle: {
                fontSize: '22'
              }
            }
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          data: [{
            value: 0,
            name: '优秀率'
          }, {
            value: 0,
            name: '良好率'
          }, {
            value: 0,
            name: '及格率'
          }, {
            value: 0,
            name: '不及格'
          }]
        }]
      },
      option4: {
        color: ['#F25A5A', '#FFC046', '#05B55A', '#1479EE'],
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          x: 'left',
          data: ['优秀率', '良好率', '及格率', '不及格']
        },
        series: [{
          name: '女生总体情况',
          type: 'pie',
          radius: ['50%', '70%'],
          avoidLabelOverlap: false,
          label: {
            normal: {
              show: false,
              position: 'center',
              textStyle: {
                fontSize: '22'
              }
            },
            emphasis: {
              show: true,
              position: 'center',
              formatter: function (param) {
                return param.name + '\r\n\r\n' + param.percent + '%'
              },
              textStyle: {
                fontSize: '22'
              }
            }
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          data: [{
            value: 0,
            name: '优秀率'
          }, {
            value: 0,
            name: '良好率'
          }, {
            value: 0,
            name: '及格率'
          }, {
            value: 0,
            name: '不及格'
          }]
        }]
      },
      option5: {
        color: ['#F25A5A', '#FFC046', '#05B55A', '#1479EE'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['优秀', '良好', '及格', '不及格'],
          x: 'right'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: [],
          axisTick: {
            alignWithLabel: true
          }
        }],
        yAxis: [{
          type: 'value'
        }],
        series: [{
          name: '优秀',
          type: 'bar',
          stack: '总量',
          data: []
        },
        {
          name: '良好',
          type: 'bar',
          stack: '总量',
          data: []
        },
        {
          name: '及格',
          type: 'bar',
          stack: '总量',
          data: []
        },
        {
          name: '不及格',
          type: 'bar',
          stack: '总量',
          data: []
        }
        ]
      }
    }
  },
  mounted () {
    this.$store.dispatch('setRoute', this.$route.path)
    typeof this.$route.params.schoolId === 'undefined' ? this.schoolId = 0 : this.schoolId = this.$route.params.schoolId
    this.getAreaInfo()
    this.getSchoolRank()
    this.getSchoolOverview()
  },
  methods: {
    getAreaInfo () {
      getAreaInfo(this.schoolId).then((res) => {
        this.areaInfo.schoolNum = res.data.data[0]
        this.areaInfo.excellentRate = (res.data.data[1] * 100).toFixed(2)
        this.areaInfo.passingRate = (res.data.data[2] * 100).toFixed(2)
      })
    },
    getSchoolRank () {
      getSchoolRank(this.schoolId).then((res) => {
        this.rank = res.data.data
      })
    },
    getSchoolOverview () {
      getSchoolOverview(this.schoolId).then((res) => {
        this.option1.series[0].data[0].value = res.data.overall[0]
        this.option1.series[0].data[1].value = res.data.overall[1]
        this.option1.series[0].data[2].value = res.data.overall[2]
        this.option1.series[0].data[3].value = res.data.overall[3]
        this.option2.radar.indicator = []
        for (let i = 0; i < res.data.items.length; i++) {
          this.option2.radar.indicator.push({ name: res.data.items[i].name, max: 100 })
          this.option2.series[0].data[0].value.push(res.data.items[i].value)
        }
        this.option3.series[0].data[0].value = res.data.boy[0]
        this.option3.series[0].data[1].value = res.data.boy[1]
        this.option3.series[0].data[2].value = res.data.boy[2]
        this.option3.series[0].data[3].value = res.data.boy[3]
        this.option4.series[0].data[0].value = res.data.girl[0]
        this.option4.series[0].data[1].value = res.data.girl[1]
        this.option4.series[0].data[2].value = res.data.girl[2]
        this.option4.series[0].data[3].value = res.data.girl[3]
        for (let i = 0; i < res.data.grade.length; i++) {
          this.option5.xAxis[0].data.push(res.data.grade[i].name)
          this.option5.series[0].data.push(res.data.grade[i].value[0])
          this.option5.series[1].data.push(res.data.grade[i].value[1])
          this.option5.series[2].data.push(res.data.grade[i].value[2])
          this.option5.series[3].data.push(res.data.grade[i].value[3])
        }
        this.echarts.init(this.$refs['chart1']).setOption(this.option1)
        this.echarts.init(this.$refs['chart2']).setOption(this.option2)
        this.echarts.init(this.$refs['chart3']).setOption(this.option3)
        this.echarts.init(this.$refs['chart4']).setOption(this.option4)
        this.echarts.init(this.$refs['chart5']).setOption(this.option5)
      })
    },
    downloadSchoolReport () {
      checkSchoolReport(this.schoolId, true).then((res) => {
        if (res.data.result) {
          downloadSchool(this.schoolId, true)
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },
    downloadPersonReport () {
      this.$message.error('暂未开通')
    }
  }
}
</script>

<style scoped>
  @import "../../styles/layui.css";
  .pointer {
    cursor: pointer;
  }
  .school-icon {
    background:url(../../icons/png/i_03.jpg)
  }
</style>
